<script setup lang="ts">
import BaseIcon from './BaseIcon.vue'

interface Props {
  text?: string
  showIcon?: boolean
  className?: string
}

defineOptions({
  name: 'AppRechargeTip',
})

const props = withDefaults(defineProps<Props>(), {
    text: '',
    showIcon: true
})

</script>

<template>
    <div class="bg-brand-100 w-full mt-[1rem] px-[.5rem] py-[1rem] rounded-[.5rem] text-[.75rem] center" :class="[props.className]">
        <template v-if="props.text">
            <div class="flex justify-start items-center">
              <BaseIcon name="recharge-remark" class="text-text-black-10 mr-[.625rem]" />
              <span class="text-text-white-1 text-[.625rem]">{{ props.text }}</span>
            </div>
        </template>
        <slot />
    </div>
</template>
